<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="view"></router-view>
      </keep-alive>
    </transition>
    <v-alert></v-alert>
    <v-confirm-login></v-confirm-login>
    <v-loading></v-loading>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapGetters} from 'vuex'
  import Alert from 'components/alert/alert.vue'
  import ConfirmLogin from 'components/confirm-login/confirm-login.vue'
  import Loading from 'components/loading/loading.vue'

  export default {
    name: 'app',
    data() {
      return {
        transitionName: ''
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    watch: {
      '$route'(to, from) {
        let isBack = this.$router.isBack
        if (isBack) {
          this.transitionName = 'slide-down'
        } else if (isBack === false) {
          this.transitionName = 'slide-top'
        }
        this.$router.isBack = false
        if (this.userInfo.user_token && this.userInfo.user_token !== '' && to.path === '/login') {
          this.$router.goBack()
        }
      }
    },
    components: {
      'v-alert': Alert,
      'v-confirm-login': ConfirmLogin,
      'v-loading': Loading
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .view {
    position: absolute;
    width: 100%;
    transition: all 0.2s cubic-bezier(.42, 0, .58, 1);
    &.slide-top-enter-active, &.slide-down-leave-active {
      opacity: 0;
      transform: translateY(100%);
    }
    &.slide-top-leave-active, &.slide-down-enter {
      opacity: 0;
      transform: translateY(-100%);
    }
  }
</style>
